<!--
 * @Description: 数泽MES
 * @Author: SZPT
 * @Date: 2023-10-19 20:16:52
-->
<script setup>
defineOptions({
  // 用this.$wkFile.select()替代
  name: 'WkFileSelect',
})

const props = defineProps({
  name: {
    type: String,
    default: 'file'
  },
  disabled: Boolean,
  multiple: Boolean,
  accept: {
    type: String,
    default: '*.*' // *.* image/*
  }
})

const emits = defineEmits(['change'])

function handleChange(ev) {
  const files = ev.target.files
  if (!files) {
    return
  }
  emits('change', files, ev)
}

function handleClick() {
  if (!this.disabled) {
    this.$wkFile.select({
      name: props.name,
      multiple: props.multiple,
      accept: props.accept
    }).then(ev => {
      handleChange(ev)
    })
  }
}
</script>

<template>
  <div class="wk-file-select" @click="handleClick">
    <slot/>
  </div>
</template>


<style lang="scss" scoped>
.wk-file-select {
  &__input {
    display: none;
  }
}
</style>
